$m(function (args) {
    // 主体布局
    var northLayout = $("#tempo-ai-achieve-survey-layout-main");
    var centerDiv = $("#applied-chart-mid");
    var southDiv = $("#applied-chart-bottom");

    var $this = $(this.element).closest("body");
    var serviceTypeCurrent = "";

    // 上侧布局
    northLayout.layout({
        north: {
            resizable: false,
            size: 120,
            spacing_open: 0
        },
        center: {
            onresize: TempoUtils.throttle(function () {
                renderCenter(serviceTypeCurrent);
                initSouth(serviceTypeCurrent);
            }, 100, true)
        }
    });

    //访问TOP10
    var visitTopTenGridtable;
    //收藏topten
    var collectTopTenGridtable;

    var init = function () {
        initCount();
        renderCenter("");//渲染中间图形
        initSouth();
        bindEvent();
    }
    //绑定切换服务事件
    var bindEvent = function () {
        $this.find(".applied-header-ul").on("click", "li", function (e) {
            $this.find(".tempo-achieve-survey-topten-buttonbar-class").find("span:first").trigger("click");
            var li = $(e.target).closest("li");
            li.addClass("yytj-checked");
            li.siblings().removeClass("yytj-checked");
            var index = $this.find("li").index(li[0]);
            var serviceType = "";
            switch (index) {
                case 0:
                    <!--全部服务-->
                    serviceType = "";
                    break;
                case 3:
                    <!--异步服务-->
                    serviceType = "async";
                    break;
                case 4:
                    <!--同步服务-->
                    serviceType = "sync";
                    break;
                case 5:
                    <!--流服务-->
                    serviceType = "stream";
                    break;
                case 6:
                    <!--灰度服务-->
                    serviceType = "gray";
                    break;
                default:
                    break;
            }
            serviceTypeCurrent = serviceType;
            initSouth(serviceType);
            renderCenter(serviceType);
        });
    }

    var initCount = function () {
        $.ajax({
            type: "get",
            url: contextPath + "/api/ai/app/statistics/count-by-type?time="+new Date().getTime(),
            dataType: 'json',
            type: 'get',
            success: function (rs) {
                if (rs.success == true) {
                    var data = rs.data;
                    var divList = $this.find(".applied-header-ul li div:nth-child(2)");
                    $(divList[0]).find("p span:eq(0)").html((data.all));
                    if (data.all == 0) {
                        $(divList[1]).find("p span:eq(0)").html(data.async);
                        $(divList[1]).find("p:eq(1) span:eq(0)").text("0%");
                        $(divList[2]).find("p span:eq(0)").html(data.sync);
                        $(divList[2]).find("p:eq(1) span:eq(0)").text("0%");
                        $(divList[3]).find("p span:eq(0)").html(data.stream);
                        $(divList[3]).find("p:eq(1) span:eq(0)").text("0%");
                        $(divList[4]).find("p span:eq(0)").html(data.gray);
                        $(divList[4]).find("p:eq(1) span:eq(0)").text("0%");
                    } else {
                        var bl = data.async / rs.data.all * 100;
                        $(divList[1]).find("p span:eq(0)").html(data.async);
                        $(divList[1]).find("p:eq(1) span:eq(0)").html(bl.toFixed(2) + "%");
                        bl = data.sync / rs.data.all * 100;
                        $(divList[2]).find("p span:eq(0)").html(data.sync);
                        $(divList[2]).find("p:eq(1) span:eq(0)").html(bl.toFixed(2) + "%");
                        bl = data.stream / rs.data.all * 100;
                        $(divList[3]).find("p span:eq(0)").html(data.stream);
                        $(divList[3]).find("p:eq(1) span:eq(0)").html(bl.toFixed(2) + "%");
                        bl = data.gray / rs.data.all * 100;
                        $(divList[4]).find("p span:eq(0)").html(data.gray);
                        $(divList[4]).find("p:eq(1) span:eq(0)").html(bl.toFixed(2) + "%");
                    }
                }
            }
        });
    }

    var initSouth = function (serviceType) {
        $.ajax({
            type: "get",
            url: contextPath + "/api/ai/app/statistics/list-call?time="+new Date().getTime(),
            data: {type: false, serviceType: serviceType},
            dataType: 'json',
            type: 'get',
            success: function (rs) {
                if (rs.success == true) {
                    var data = rs.data;
                    renderSouth(data);
                }
            }
        });
        $.ajax({
            type: "get",
            url: contextPath + "/api/ai/app/statistics/list-fail-call?time="+new Date().getTime(),
            dataType: 'json',
            data: {serviceType: serviceType},
            type: 'get',
            success: function (rs) {
                if (rs.success == true) {
                    var data = rs.data;
                    var failCallTopTen = $this.find(".tempo-achieve-survey-topten-div-content-class-collect");
                    failCallTopTen.empty();
                    failCallTopTenGridtable = $("<table id='tempo-achieve-survey-topten-table-collect'></table>").appendTo(failCallTopTen);
                    var visitTitleDiv = $this.find(".tempo-achieve-survey-topten-div-class-collect").find(".tempo-achieve-survey-topten-title-class");
                    visitTitleDiv.html("");
                    var title = TempoUtils.locale("aiview.app_call_heat_fail");
                    $("<label style='font-weight: bold;	font-size: 14px;color: #000000;'>" + title + "</label>").appendTo(visitTitleDiv);
                    $('<span style="padding-bottom: 1px;" class="ui-icon tempo-ui-icon tempo-ui-icon-tip tempo-mine-button" id="disinfo4"></span>').appendTo(visitTitleDiv);
                    var helpInfoHtml = getrenderHelpHtml4();
                    $(helpInfoHtml).appendTo(visitTitleDiv)

                    var x = $("#disinfo4").position().left;
                    var y = $("#disinfo4").position().top;
                    $("#helpIno4").css("left", x + 20);
                    $("#helpIno4").css("top", y + 20);
                    $("#helpIno4").hide();
                    $("#disinfo4").mouseover(function () {
                        $("#helpIno4").show();
                    });
                    $("#disinfo4").mouseout(function () {
                        $("#helpIno4").hide();
                    });
                    renderSouthGrid(data, failCallTopTenGridtable, 1);
                }
            }
        });
    }

    var getrenderHelpHtml = function () {
        var helpInfoHtml = "<div id='helpIno' style='background: rgb(243, 245, 247);position:absolute;position:absolute;width:425px;height:180px;backgroud:#e0e5e5;box-shadow:0px 0px 10px #dae0e9;z-index:1000;'>" +
            "<p style='font-size:14;font-weight: bold;color: #000000;padding-top:15px;padding-left:8px;height:20px;'>" + TempoUtils.locale("aiview.explain") + "</p><p style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.online-service-info") + "</p>" +
            "<p style='font-size:14;font-weight: bold;color: #000000;padding-top:20px;height:20px;padding-left:8px;'>" + TempoUtils.locale("aiview.tjgz") + "</p>" +
            "<p style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.asyn-service-info") + "</p>" +
            "<p style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.sync-service-info") + "</p>" +
            "<p style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.stream-service-info") + "</p>" +
            "<p style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.gray-service-info") + "</p></div>";
        return helpInfoHtml;
    }

    var getrenderHelpHtml2 = function () {
        var helpInfoHtml = "<div class='helpIno2' style='background: rgb(243, 245, 247);position:absolute;position:absolute;width:370px;height:150px;backgroud:#e0e5e5;box-shadow:0px 0px 10px #dae0e9;z-index:1000;'>" +
            "<p style='font-size:14;font-weight: bold;color: #000000;padding-top:15px;height:20px;padding-left:8px;'>" + TempoUtils.locale("aiview.explain") + "</p><p style='padding-left:15px;'>" + TempoUtils.locale("aiview.activity-service-info") + "</p>" +
            "<p style='font-size:14;font-weight: bold;color: #000000;padding-top:20px;height:20px;padding-left:8px;'>" + TempoUtils.locale("aiview.tjgz") + "</p>" +
            "<p style='padding-left:15px;height:20px;'>" + TempoUtils.locale("aiview.service-info") + "</p>" +
            "</div>";
        return helpInfoHtml;
    }

    /**
     * tag--》在线数量图0  活跃量趋势图1
     * tagFirst --> 第一次加载为同步
     */
    var renderEchars = function (trend, url, tag, serviceType) {
        var trendChart = echarts.init(trend[0], null, {width: "auto", height: "auto"});
        var titleDiv = $("<div class='tempo-achieve-survey-title-div-class'></div>").appendTo(trend);
        var trendToolBar = $("<div class='tempo-achieve-survey-buttonbar-div-class'/>").appendTo(trend);
        var dataNull = $("<div style='display:none;' class='tempo-mid-data-null'> <span class='data_null_icon applied_data_null'></span> <br/><span class='applied_data_null'>" + TempoUtils.locale("aiview.canvas_data_null") + "</span></div>").appendTo(trend);
        $("<span style='display:none;' class='tempo-achieve-survey-buttonbar-span-class tempo-achieve-survey-buttonbar-span-select-class'>" + TempoUtils.locale("runtime.lately_week") + "</span>").data("linkType", "4").appendTo(trendToolBar);
        $("<span style='display:none;' class='tempo-achieve-survey-buttonbar-span-class'>" + TempoUtils.locale("runtime.lately_month") + "</span>").data("linkType", "3").appendTo(trendToolBar);
        $("<span style='display:none;' class='tempo-achieve-survey-buttonbar-span-class'>" + TempoUtils.locale("runtime.lately_three_month") + "</span>").data("linkType", "2").appendTo(trendToolBar);
        $("<span style='display:none;' class='tempo-achieve-survey-buttonbar-span-class '>" + TempoUtils.locale("runtime.lately_half_year") + "</span>").data("linkType", "1").appendTo(trendToolBar);
        trendToolBar.on("click", "span", function () {
            var type = $(this).data("linkType");
            trendToolBar.find('span').removeClass('tempo-achieve-survey-buttonbar-span-select-class');
            $(this).addClass('tempo-achieve-survey-buttonbar-span-select-class');
            $.ajax({
                type: "get",
                url: contextPath + url,
                data: {datetype: type},
                dataType: 'json',
                success: function (res) {
                    trend.find("#helpIno").remove();
                    titleDiv.empty();
                    trendToolBar.find("span").show();
                    if (res.success && res.data.length > 0) {
                        dataNull.hide();

                        drawLineChart(trendChart, res.data, tag, serviceType);
                    } else {
                        dataNull.show();
                        drawLineChart(trendChart, [], tag, serviceType);
                    }
                    if (tag == 0) {
                        $("<label>" + TempoUtils.locale("aiview.applicationTrend") + "</label>").appendTo(titleDiv);
                        $('<span style="padding-bottom: 1px;" class="ui-icon tempo-ui-icon tempo-ui-icon-tip tempo-mine-button" id="disinfo"></span>').appendTo(titleDiv);
                        var helpInfoHtml = getrenderHelpHtml();
                        $(helpInfoHtml).appendTo(trend)
                        var x = $("#disinfo").position().left;
                        var y = $("#disinfo").position().top;
                        $("#helpIno").css("left", x + 65);
                        $("#helpIno").css("top", y + 40);
                        $("#helpIno").hide();
                        $("#disinfo").mouseover(function () {
                            $("#helpIno").show();
                        });
                        $("#disinfo").mouseout(function () {
                            $("#helpIno").hide();
                        });
                    } else {
                        $("<label>" + TempoUtils.locale("aiview.appdayTrend") + "</label>").appendTo(titleDiv);
                        $('<span style="padding-bottom: 1px;" class="ui-icon tempo-ui-icon tempo-ui-icon-tip tempo-mine-button" id="disinfo2"></span>').appendTo(titleDiv);
                        var helpInfoHtml2 = getrenderHelpHtml2();
                        $(helpInfoHtml2).appendTo(trend)
                        var x = $("#disinfo2").position().left;
                        var y = $("#disinfo2").position().top;
                        $(".helpIno2").css("left", x + 65);
                        $(".helpIno2").css("top", y + 40);
                        $(".helpIno2").hide();
                        $("#disinfo2").mouseover(function () {
                            $(".helpIno2").show();
                        });
                        $("#disinfo2").mouseout(function () {
                            $(".helpIno2").hide();
                        });
                    }
                }
            });
        });
        trendToolBar.find("span:eq(3)").trigger("click");
    }
    var renderCenter = function (serviceType) {
        centerDiv.empty();
        var onlineTrend = $("<div class='tempo-achieve-survey-trend-div-class tempo-achieve-survey-trend-div-class-visit'/>").appendTo(centerDiv);
        renderEchars(onlineTrend, "/api/ai/app/statistics/online-by-date?time="+new Date().getTime(), 0, serviceType);
        var activeTrend = $("<div class='tempo-achieve-survey-trend-div-class tempo-achieve-survey-trend-div-class-active'/>").appendTo(centerDiv);
        renderEchars(activeTrend, "/api/ai/app/statistics/active-by-date?time="+new Date().getTime(), 1, serviceType);
    }
    var drawLineChart = function (trendChart, dataArr, tag, serviceType) {
        var serverNumDiv = $this.find(".tempo-achieve-survey-trend-div-class-visit");
        var divWidth = serverNumDiv.width();
        var xAxisData = [];
        var yAxisDataAsync = [], yAxisDataStream = [], yAxisDataSync = [], yAxisDataAll = [], yAxisDataGray = [];
        for (var i = 0; i < dataArr.length; i++) {
            var datai = dataArr[i];
            xAxisData.push(datai["RUNDATE"]);
            yAxisDataAsync.push(datai["ASYNCOUNT"]);
            yAxisDataSync.push(datai["SYNCOUNT"]);
            yAxisDataStream.push(datai["STREAMCOUNT"]);
            yAxisDataGray.push(datai["GRAYCOUNT"]);
            yAxisDataAll.push(datai["ASYNCOUNT"] - 0 + datai["STREAMCOUNT"] + datai["SYNCOUNT"] + datai["GRAYCOUNT"]);
        }
        var text = "";
        var asyncServiceTitle = TempoUtils.locale("aiview.async_service");
        var syncServiceTitle = TempoUtils.locale("aiview.sync_service");
        var streamServiceTitle = TempoUtils.locale("aiview.stream_service");
        var allServiceTitle = TempoUtils.locale("aiview.all_service");
        var grayServiceTitle = "灰度服务";
        var trendOption = {
            "title": [{
                "text": text,
                "left": 32,
                "top": 17,
                "show": true,
                "textStyle": {
                    "color": "black",
                    "fontSize": 14,
                }
            }
            ],
            "color": ["#1e8ac5", "#18df3b", "#6dd0e4", "#ffae00", "rgb(252, 89, 118)"],
            "grid": [{
                "top": 70,
                "right": 34,
                "show": true,
                "left": 34,
                "borderWidth": 0
            }
            ],
            "xAxis": [{
                "boundaryGap": false,
                "nameLocation": "middle",
                "nameGap": 30,
                "axisLabel": {
                    "interval": "auto",
                    "autoInterval": true
                },
                "splitLine": {
                    "show": false
                },
                "axisTick": {
                    "show": false
                },
                "splitArea": {
                    "show": false
                },
                "axisLine": {
                    "show": false
                },
                "nameShow": false,
                "data": xAxisData,
            }
            ],
            "yAxis": [{
                "position": "left",
                "splitArea": {
                    "show": false
                },
                "axisTick": {
                    "show": false
                },
                "tempoLabelFmt": {
                    "fillzero": false,
                    "thousandsplitchar": true,
                    "fixnumber": 2,
                    "selfenable": false
                },
                "axisLine": {
                    "show": false
                },
                "nameShow": false
            }
            ],
            "legend": [{
                "y": "bottom",
                "itemWidth": 25,
                "data": [allServiceTitle, asyncServiceTitle, syncServiceTitle, streamServiceTitle, grayServiceTitle],//显示y轴名称
                "selected": {
                    "全部服务": "" == serviceType,
                    "异步服务": "async" == serviceType || "" == serviceType,
                    "同步服务": "sync" == serviceType || "" == serviceType,
                    "流服务": "stream" == serviceType || "" == serviceType,
                    "灰度服务": "gray" == serviceType || "" == serviceType,
                }
            }
            ],
            "tooltip": [{
                "show": true,
                "trigger": "axis",
                "position": function (point, param, dom, rect, size) {
                    var mouseX = point[0]
                    if (mouseX > divWidth - 100) {
                        return [point[0] - 120, '40%'];
                    }
                    return [point[0] + 20, '40%'];
                }
            }
            ],
            "dataZoom": [{
                "type": "slider",
                "show": false
            }
            ],
            "series": [{
                "type": "line",
                "fid": allServiceTitle,
                "name": allServiceTitle,
                "data": yAxisDataAll,
                "smooth": true,
            }, {
                "type": "line",
                "fid": asyncServiceTitle,
                "name": asyncServiceTitle,
                "data": yAxisDataAsync,
                "smooth": true
            }, {
                "type": "line",
                "fid": syncServiceTitle,
                "name": syncServiceTitle,
                "data": yAxisDataSync,
                "smooth": true
            }, {
                "type": "line",
                "fid": streamServiceTitle,
                "name": streamServiceTitle,
                "data": yAxisDataStream,
                "smooth": true
            }, {
                "type": "line",
                "fid": grayServiceTitle,
                "name": grayServiceTitle,
                "data": yAxisDataGray,
                "smooth": true
            }
            ]
        };
        trendChart.setOption(trendOption);
        return trendChart;
    }

    var getrenderHelpHtml3 = function () {
        var helpInfoHtml = "<div id='helpIno3' style='background: rgb(243, 245, 247);position:absolute;position:absolute;width:340px;height:90px;backgroud:#e0e5e5;box-shadow:0px 0px 10px #dae0e9;z-index:1000;'>" +
            "<p style='font-size:14;font-weight: bold;color: #000000;padding-top:15px;height:20px;padding-left:8px;'>" + TempoUtils.locale("aiview.explain") + "</p><p style='padding-left:15px;'>" + TempoUtils.locale("aiview.heatchart") + "</p>" +
            "<p style='padding-left:15px;'>" + TempoUtils.locale("aiview.sortinfo") + "</p>" +
            "</div>";
        return helpInfoHtml;
    }

    var getrenderHelpHtml4 = function () {
        var helpInfoHtml = "<div id='helpIno4' style='background: rgb(243, 245, 247);position:absolute;position:absolute;width:315px;height:90px;backgroud:#e0e5e5;box-shadow:0px 0px 10px #dae0e9;z-index:1000;'>" +
            "<p style='font-size:14;font-weight: bold;color: #000000;padding-top:15px;height:20px;padding-left:8px;'>" + TempoUtils.locale("aiview.explain") + "</p><p style='padding-left:15px;'>" + TempoUtils.locale("aiview.faillist") + "</p>" +
            "</div>";
        return helpInfoHtml;
    }

    //服务调用热度排名
    var renderSouth = function (result) {
        var visitTopTen = $this.find(".tempo-achieve-survey-topten-div-content-class-visit");
        visitTopTen.empty();
        visitTopTenGridtable = $("<table id='tempo-achieve-survey-topten-table-visit'></table>").appendTo(visitTopTen);
        renderSouthGrid(result, visitTopTenGridtable, 0);
        var topTenBtnBar = $this.find(".tempo-achieve-survey-topten-buttonbar-class");
        var visitTitleDiv = $this.find(".tempo-achieve-survey-topten-div-class-visit").find(".tempo-achieve-survey-topten-title-class");
        visitTitleDiv.html("");
        var title = TempoUtils.locale("aiview.app_call_heat_success") + "(Top10)";
        $("<label style='font-weight: bold;	font-size: 14px;color: #000000;'>" + title + "</label>").appendTo(visitTitleDiv);
        $('<span style="padding-bottom: 1px;" class="ui-icon tempo-ui-icon tempo-ui-icon-tip tempo-mine-button" id="disinfo3"></span>').appendTo(visitTitleDiv);
        var helpInfoHtml = getrenderHelpHtml3();
        $(helpInfoHtml).appendTo(visitTitleDiv)

        var x = $("#disinfo3").position().left;
        var y = $("#disinfo3").position().top;
        $("#helpIno3").css("left", x + 20);
        $("#helpIno3").css("top", y + 20);
        $("#helpIno3").hide();
        $("#disinfo3").mouseover(function () {
            $("#helpIno3").show();
        });
        $("#disinfo3").mouseout(function () {
            $("#helpIno3").hide();
        });
        topTenBtnBar.on("click", "span", function () {
            var linktype = $(this).data("linktype");
            var type = false;
            var title = TempoUtils.locale("aiview.app_call_heat_success");
            if (linktype == "0") {
                title += "(Top10)";
            } else {
                title += "(Bottom10)";
                type = true;
            }
            var visitTitleDiv = $this.find(".tempo-achieve-survey-topten-div-class-visit").find(".tempo-achieve-survey-topten-title-class");
            visitTitleDiv.html("");
            $("<label style='font-weight: bold;	font-size: 14px;color: #000000;'>" + title + "</label>").appendTo(visitTitleDiv);
            $('<span class="ui-icon tempo-ui-icon tempo-ui-icon-tip tempo-mine-button" id="disinfo3"></span>').appendTo(visitTitleDiv);
            var helpInfoHtml = getrenderHelpHtml3();
            $(helpInfoHtml).appendTo(visitTitleDiv)
            var x = $("#disinfo3").position().left;
            var y = $("#disinfo3").position().top;
            $("#helpIno3").css("left", x + 20);
            $("#helpIno3").css("top", y + 20);
            $("#helpIno3").hide();
            $("#disinfo3").mouseover(function () {
                $("#helpIno3").show();
            });
            $("#disinfo3").mouseout(function () {
                $("#helpIno3").hide();
            });
            topTenBtnBar.find('span').removeClass('tempo-achieve-survey-buttonbar-span-select-class');
            $(this).addClass('tempo-achieve-survey-buttonbar-span-select-class');
            $.ajax({
                type: "post",
                url: contextPath + "/api/ai/app/statistics/list-call",
                data: {type: type, serviceType: serviceTypeCurrent},
                dataType: 'json',
                type: 'get',
                async: false,
                success: function (res) {
                    if (res.success == true) {
                        var data = res.data;
                        visitTopTenGridtable.datagrid("clearGridData");
                        var index = 0;
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].aptype != null) {
                                data[i].oNum = index + 1;
                                visitTopTenGridtable.datagrid("addRowData", i, data[i]);
                                index++;
                            }

                        }
                    }
                }
            });
        });
    }

    /**
     * 调用热度排名和调用失败率排名都用下面这个渲染函数
     * @param resData
     * @param ele
     * @param type
     */
    var renderSouthGrid = function (resData, ele, type) {
        var newResData = [];
        for (var i = 0; i < resData.length; i++) {
            if (resData[i].aptype != null) {
                newResData.push(resData[i]);
            }
        }
        newResData.forEach(function (v, i) {
            v.oNum = i + 1;
        })
        var colName = ["apid", TempoUtils.locale("aiview.app_name"), TempoUtils.locale("aiview.app_type"), TempoUtils.locale("aiview.app_author"), TempoUtils.locale("aiview.app_call_times"), TempoUtils.locale("aiview.app_call_times_ok"), TempoUtils.locale("aiview.oNum")];
        var formatType = function (val) {
            switch (val) {
                case "async":
                    return TempoUtils.locale("aiview.async");
                case "sync":
                    return TempoUtils.locale("aiview.sync");
                case "stream":
                    return TempoUtils.locale("aiview.stream_service");
                case "gray":
                    return "灰度";
                default:
                    return val;
            }
        };
        var colModel = [{name: "apid", sortable: false, hidden: true},
            {
                name: "apname", align: "center", sortable: false,
                formatter: function (obj, rows, grid) {
                    var maxWidth = '138px';
                    if (window.screen.width == 1366) {
                        maxWidth = '88px';
                    } else if (window.screen.width == 1600) {
                        maxWidth = '108px';
                    }
                    var html = "<span style='display: inline-flex;overflow: hidden;max-width: " + maxWidth + ";'>" + TempoMineUtils.encodeHTML(obj) + "</span>";
                    //管道流程增加pl标识
                    if (grid.flowtype && grid.flowtype == "plflow") {
                        var calWidthSpan = $("<span>").hide().appendTo(document.body);
                        $(calWidthSpan).text(obj);
                        //计算字符的宽度
                        var width = calWidthSpan.width();
                        var imgPath = contextPath + "/css/images/pl_icon.png";
                        var plImg = "<img style=' margin-left: -5px;margin-top: 2px;position: absolute;' src='" + imgPath + "' class='tempo-cgjc-stat-sync-service-pl-image'/>";
                        if (width < 138) {
                            plImg = "<img style=' margin-left: 0px;margin-top: 2px;position: absolute;' src='" + imgPath + "' class='tempo-cgjc-stat-sync-service-pl-image'/>";
                        }
                        html += plImg;
                    }
                    return html;
                }
            },
            {name: "aptype", align: "center", sortable: false, formatter: formatType},
            {name: "apauthor", align: "center", sortable: false},
            {
                name: "apsuc", align: "center", formatter: function (a, b, c) {
                    return parseInt(c["apfai"]) + parseInt(c["apsuc"]);
                }, sortable: false
            },
            {
                name: "sucPer", sortable: false, align: "center",
                formatter: function (a, b, c) {
                    if (c["apfai"] == "0" && c["apsuc"] == "0") {
                        return "0.00%";
                    } else {
                        var value = c["apsuc"] / (parseFloat(c["apsuc"]) + parseFloat(c["apfai"])) * 100;
                        return value.toFixed(2) + "%";
                    }
                }
            },
            {
                name: "oNum", sortable: false, align: "center", formatter: function (a) {
                    switch (a) {
                        case 1:
                            return '<div class="tempo-achieve-survey-top3 tempo-achieve-survey-top3-1">1</div>';
                            break;
                        case 2:
                            return '<div class="tempo-achieve-survey-top3 tempo-achieve-survey-top3-2">2</div>';
                            break;
                        case 3:
                            return '<div class="tempo-achieve-survey-top3 tempo-achieve-survey-top3-3">3</div>';
                            break;
                        default:
                            return a;
                            break;
                    }
                }
            }
        ];
        if (type == 1) {//调用失败率
            colName = ["apid", TempoUtils.locale("aiview.app_name"), TempoUtils.locale("aiview.app_type"), TempoUtils.locale("aiview.app_call_times"), TempoUtils.locale("aiview.faiPer"), TempoUtils.locale("aiview.oNum")];

            colModel = [{name: "apid", sortable: false, hidden: true},
                {
                    name: "apname", sortable: false, align: "center",
                    formatter: function (obj, rows, grid) {
                        var maxWidth = '138px';
                        if (window.screen.width == 1366) {
                            maxWidth = '88px';
                        } else if (window.screen.width == 1600) {
                            maxWidth = '108px';
                        }
                        var html = "<span style='display: inline-flex;overflow: hidden;max-width: " + maxWidth + ";'>" + TempoMineUtils.encodeHTML(obj) + "</span>";
                        //管道流程增加pl标识
                        if (grid.flowtype && grid.flowtype == "plflow") {
                            var imgPath = contextPath + "/css/images/pl_icon.png";
                            var plImg = "<img style=' margin-left: 4px;margin-top: 2px;position: absolute;' src='" + imgPath + "' class='tempo-cgjc-stat-sync-service-pl-image'/>";
                            html += plImg;
                        }
                        return html;
                    }
                },
                {name: "aptype", align: "center", sortable: false, formatter: formatType},
                {
                    name: "apfai", sortable: false, formatter: function (a, b, c) {
                        return parseInt(c["apfai"]) + parseInt(c["apsuc"]);
                    }, align: "center"
                },
                {
                    name: "aperfai", sortable: false, formatter: function (a, b, c) {
                        if (c["aperfai"] - 0 == 0) {
                            return "0.00%";
                        } else {
                            var value = (c["aperfai"] - 0) * 100;
                            return value.toFixed(2) + "%";
                        }
                    }, align: "center"
                },
                {
                    name: "oNum", sortable: false, align: "center", formatter: function (a) {
                        switch (a) {
                            case 1:
                                return '<div class="tempo-achieve-survey-top3 tempo-achieve-survey-top3-1">1</div>';
                                break;
                            case 2:
                                return '<div class="tempo-achieve-survey-top3 tempo-achieve-survey-top3-2">2</div>';
                                break;
                            case 3:
                                return '<div class="tempo-achieve-survey-top3 tempo-achieve-survey-top3-3">3</div>';
                                break;
                            default:
                                return a;
                                break;
                        }
                    }
                },
            ];
        }
        ele.datagrid({
            fit: true,
            datatype: "local",
            data: newResData,
            colNames: colName,
            colModel: colModel,
            rowNum: 10,
            rownumbers: false,
            pagination: false,
            multiselect: false,
            shrinkToFit: true
        });
    }


    init();

});
